<script setup>
import Header from './components/Header.vue'
import Navigator from './components/Navigator.vue'
import Content from './components/Content.vue'
import { ref } from 'vue'
let message = ref('');
function revierwe(msg) {
  message.value = msg;
}
</script>

<template>
  <div>
    {{ message }}
    <Header class="header"></Header>
    <Navigator class="navigator" @sendMessage="revierwe"></Navigator>
    <Content class="content" :message="message"></Content>
  </div>
</template>

<style scoped>
.header {
  height: 80px;
  border: 1px solid red;
}

.navigator {
  width: 15%;
  height: 800px;
  display: inline-block;
  border: 1px blue solid;
  float: left;
}

.content {
  width: 83%;
  height: 800px;
  display: inline-block;
  border: 1px goldenrod solid;
  float: right;
}
</style>